{% extends 'base.html' %}
{% load staticfiles %}

{# 页面标题 #}
{% block title %}
    我的网站|首页
{% endblock %}

{# 页面选中状态填补-首页 #}
{% block nav_home_active %}
    active
{% endblock %}

{# 页面css调用静态文件-填充head头部标签 #}
{% block header_extends %}
    <link rel="stylesheet" href="{% static 'home.css' %}">
    <script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
{% endblock %}

{# 页面内容 #}
{% block content %}
    <h2 class="home-content">能不能给我一首歌的时间~~</h2>
    <!-- 图表容器 DOM -->
    <div id="container"></div>
    <div class="hot-data">
        <!-- 今日博客阅读量排行 -->
        <h3>今日热门博客</h3>
        <ul>
            {% for hot_data in today_hot_data %}
                <li>
                    <a href="{% url 'blog_detail' hot_data.id %}">
                    {{ hot_data.title }}</a>({{ hot_data.read_num_sum }})
                </li>
            {% empty %}
                <li>今天暂时没有热门博客</li>
            {% endfor %}
        </ul>
    </div>
    <div class="hot-data">
        <!-- 昨日博客阅读量排行 -->
        <h3>昨日热门博客</h3>
        <ul>
            {% for hot_data in yesterday_hot_data %}
                <li>
                    <a href="{% url 'blog_detail' hot_data.id %}">
                    {{ hot_data.title }}</a>({{ hot_data.read_num_sum }})
                </li>
            {% empty %}
                <li>昨天暂时没有热门博客</li>
            {% endfor %}
        </ul>
    </div>
    <div class="hot-data">
        <!-- 7日博客阅读量排行 -->
        <h3>7日热门博客</h3>
        <ul>
            {% for hot_data in seven_days_hot_data %}
                <li>
                    <a href="{% url 'blog_detail' hot_data.id %}">
                    {{ hot_data.title }}</a>({{ hot_data.read_num_sum }})
                </li>
            {% empty %}
                <li>昨天暂时没有热门博客</li>
            {% endfor %}
        </ul>
    </div>
    <script>
        // 图表配置
        var options = {
            chart: {
                type: 'line'                          //指定图表的类型，默认是折线图（line）
            },
            title: {
                text: null                 // 标题
            },
            xAxis: {
                categories: {{ dates|safe }},    // x轴分类
                tickmarkPlacement: 'on',
                title: { text: '前7日阅读量变化' }
            },
            yAxis: {
                title: {text: null},                    // y轴标题
                labels:{ enabled: false },
                gridLineDashStyle: 'Dash',
            },
            series: [{                              // 数据列
                name: '阅读量',                        // 数据列名
                data: {{ read_nums }}                     // 数据
            }],
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            legend:{ enabled:false },
            credits:{ enabled:false },
        };
        // 图表初始化函数
        var chart = Highcharts.chart('container', options);
    </script>
{% endblock %}